#box{
	width:100vw;
	height:100vh;
	overflow: auto;
}
.promise {
    .top {
        position: relative;
        width: 100%;
        image {
            width: 100%;
            display: block;
        }
        .dataRange {
            color: rgb(255, 255, 255);
            font-size: 3.73vw;
            padding: 0 3vw;
            position: absolute;
            line-height: 8vw;
            // text-align: center;
            border-radius: 0 0 4vw 4vw;
            top: 0;
            margin-left: 50%;
            transform: translate(-50%);
            background-color: #FF9A09;
        }
        .iconPool {
            width: 39vw;
            height: 8vw;
            // background-color: #fff;
            position: absolute;
            top: 103vw;
            left: 31vw;
            // overflow: hidden;
            .text {
                width: 11vw;
                font-size: 3.2vw;
                line-height: 4vw;
                color: #fff;
                float: left;
            }
            .num {
                width: 5vw;
                height: 8vw;
                background-color: #fff;
                color: #CD2017;
                font-size: 6vw;
                font-weight: 700;
                text-align: center;
                float: left;
                margin-right: 1.5vw;
                // margin-top: 1vw;
            }
            .dong {
                font-size: 3vw;
                background-color: #FFBA00;
                padding: 0 1vw;
                line-height: 4vw;
                border-radius: 4vw;
                color: #CD2017;
                position: absolute;
                right: 3vw;
                top: -4vw;
                z-index: 20;
                display: none;
                &.on {
                    display: block;
                    animation: numdong 0.8s linear 1;
                }
            }
        }
        .btn {
            position: absolute;
            width: 36vw;
            top: 122vw;
            left: 12vw;
            padding-left:0;
            border: none;
            .invite {
                width: 33vw;
            }
        }
        .join {
            position: absolute;
            width: 33vw;
            top: 122vw;
            right: 12vw;
        }
        .finish {
            position: absolute;
            width: 34vw;
            top: 122vw;
            left: 32vw;
        }
    }
    .list {
        margin-top:-2px;
        padding: 0 4vw 4vw 4vw;
        background-color: rgb(236, 163, 50);
        .rule {
            font-size: 3.2vw;
            color: #fff;
            margin-left: 38vw;
            margin-bottom: 4vw;
            image {
                width: 1.5vw;
            }
        }
        .ul {
            padding: 14vw 4vw 4vw 4vw;
            background-color: #FFE1C9;
            border-radius: 2vw;
            // overflow:hidden;
            position: relative;
            .title {
                position: absolute;
                top: 4vw;
                left: 50%;
                white-space: nowrap;
                // margin-left: 50%;
                transform: translate(-50%);
                font-size: 3.73vw;
                color: #9C0000;
                font-weight: 700;
                // margin-bottom: 3vw;
                image {
                    width: 12vw;
                }
            }
            .title_2 {
                font-size: 3vw;
                position: absolute;
                top: 10vw;
                left: 50%;
                white-space: nowrap;
                transform: translate(-50%);
                color: #cc0000;
            }
            .li {
                padding: 3vw 0;
                border-bottom: 1px solid #F0C8A8;
                overflow: hidden;
                image {
                    width: 9vw;
                    height: 9vw;
                    border-radius: 9vw;
                    float: left;
                    margin-right: 2vw;
                }
                .info {
                    float: left;
                    .name {
                        font-size: 3.73vw;
                        color: #6A3030;
                    }
                    .time {
                        font-size: 3.2vw;
                        color: #886464;
                    }
                }
                .isPromise {
                    float: right;
                    width:9vw;
					border-radius:0;
                    margin-right: 3vw;
                }
                .addIcon {
                    float: right;
                    font-size: 3.73vw;
                    color: #F62E24;
                    margin-top: 2vw;
                }
            }
        }
    }
}
@keyframes numdong {
    0% {
        top: -4vw;
        transform: scale(1.1);
    }
    25% {
        top: -5vw;
        transform: scale(1.2);
    }
    50% {
        top: -6vw;
        transform: scale(1.3);
    }
    75% {
        top: -7vw;
        transform: scale(1.4);
    }
    100% {
        top: -8vw;
        transform: scale(1.5);
    }
}